<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <div th:replace="fragments/resourceLink :: resourceLink"></div>
    <script type="text/javascript" src="../../../resources/js/booked.js"></script>
    <title>manager&onlineBook</title>
</head>

<body>
<div class="navbar navbar-inverse" th:replace="fragments/header :: header">
    heah
</div>


<!-- Page container -->
<div class="page-container">

    <!-- Page content -->
    <div class="page-content">

        <!-- Main sidebar -->
        <div class="sidebar sidebar-main">
            <div th:replace="fragments/leftmanager :: leftmanager"></div>
        </div>
        <!-- /main sidebar -->


        <!-- Main content -->
        <div class="content-wrapper">

            <!-- Page header -->
            <div class="page-header page-header-default">
                <div class="page-header-content">
                    <div class="page-title">
                        <h3 data-th-text="管理员页面"></h3>
                    </div>

                    <div class="heading-elements">
                        <div class="heading-btn-group hidden">
                            <a href="#" class="btn btn-link btn-float has-text"><i
                                    class="icon-bars-alt text-primary"></i><span>Statistics</span></a>
                            <a href="#" class="btn btn-link btn-float has-text"><i
                                    class="icon-calculator text-primary"></i> <span>Invoices</span></a>
                            <a href="#" class="btn btn-link btn-float has-text"><i
                                    class="icon-calendar5 text-primary"></i> <span>Schedule</span></a>
                        </div>
                    </div>
                </div>

                <div class="breadcrumb-line">
                    <ul class="breadcrumb" style="float: left;">
                        <li class="active"><a href="#"><i class="icon-arrow-right8 position-left"></i>预约列表</a></li>

                    </ul>

                </div>
            </div>
            <!-- /page header -->

            <div class="content">
                <div class="panel">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div class="middlebody col-md-12 column">


                            <!--上面搜索栏+排序-->
                            <form  th:href="@{/bookedList}" method="post" name="searchform" th:replace="fragments/searchbox :: searchbox"></form>

                            <!--noticeList列表表格-->
                            <div class="col-md-12 column">
                                <ul class="nav nav-tabs">
                                    <li th:class="${state == 1}?'active':''"><a th:href="@{/bookedList?state=1}">预约中</a></li>
                                    <li th:class="${state == 2}?'active':''"><a th:href="@{/bookedList?state=2}">预约成功</a></li>
                                    <li th:class="${state == 3}?'active':''"><a th:href="@{/bookedList?state=3}">预约失败</a></li>
                                    <li th:class="${state == 4}?'active':''"><a th:href="@{/bookedList?state=4}">预约结束</a></li>
                                </ul>
                                <div class="tab-content col-lg-12 col-xs-12 col-sm-12 col-md-12">
                                    <div class="tab-pane fade in active" id="tab1">
                                        <div class="row clearfix">
                                            <div class="col-md-12 column">
                                                <table class="table table-striped table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>
                                                            <a th:href="@{/bookedList?(flag=(${flag} != 4)?4:5,title=${title},num=${num},${state})}"
                                                               class="label label-success">申请时间</a>
                                                            <i th:class="${flag} == 1?'icon-arrow-up-right3':'hidden'"></i>
                                                            <i th:class="${flag} == 0?'icon-arrow-down-right3':'hidden'"></i>
                                                        </th>
                                                        <th>
                                                            <a th:href="@{/bookedList?(flag=(${flag} != 4)?4:5,title=${title},num=${num},${state})}"
                                                               class="label label-success">预约人</a>
                                                            <i th:class="${flag} == 4?'icon-arrow-up-right3':'hidden'"></i>
                                                            <i th:class="${flag} == 5?'icon-arrow-down-right3':'hidden'"></i>
                                                        </th>
                                                        <th>
                                                            <a th:href="@{/bookedList?(flag=(${flag} != 2)?2:3,title=${title},num=${num},${state})}"
                                                               class="label label-success">被预约老师</a>
                                                            <i th:class="${flag} == 2?'icon-arrow-up-right3':'hidden'"></i>
                                                            <i th:class="${flag} == 3?'icon-arrow-down-right3':'hidden'"></i>
                                                        </th>
                                                        <th>
                                                            <a th:href="@{/bookedList?(flag=(${flag} != 0)?0:1,title=${title},num=${num},${state})}"
                                                               class="label label-success">预约时间</a>
                                                            <i th:class="${flag} == 11?'icon-arrow-up-right3':'hidden'"></i>
                                                            <i th:class="${flag} == 10?'icon-arrow-down-right3':'hidden'"></i>
                                                        </th>
                                                        <th>
                                                            <a th:href="@{/bookedList?(flag=(${flag} != 6)?6:7,title=${title},num=${num},${state})}"
                                                               class="label label-success">预约原因</a>
                                                            <i th:class="${flag} == 8?'icon-arrow-up-right3':'hidden'"></i>
                                                            <i th:class="${flag} == 9?'icon-arrow-down-right3':'hidden'"></i>
                                                        </th>
                                                        <th>
                                                            <a th:href="@{/bookedList?(flag=(${flag} != 6)?6:7,title=${title},num=${num},${state})}"
                                                               class="label label-success">预约状态</a>
                                                            <i th:class="${flag} == 6?'icon-arrow-up-right3':'hidden'"></i>
                                                            <i th:class="${flag} == 7?'icon-arrow-down-right3':'hidden'"></i>
                                                        </th>
                                                        <th th:class="${state == 1}?'':'hidden'">操作</th>
                                                        <th th:class="${state == 1}?'hidden':''">反馈信息</th>
                                                        <th th:class="${state == 2}?'':'hidden'">结束预约</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr th:each="user,userStat:${bookedList}">
                                                        <td th:text="${user.submitTime}">45</td>
                                                        <td th:text="${user.bookUserName}">userID</td>
                                                        <td th:text="${user.bebookedUserName}">2016-11-22</td>
                                                        <td th:text="${user.bookTime}">45</td>
                                                        <td th:text="${user.bookReason}">userID</td>
                                                        <td th:text="${user.stateName}">2016-11-22</td>
                                                        <td th:class="${state == 1}?'':'hidden'">
                                                            <a class="label label-default audit"
                                                               th:id="${user.bookId}">审核</a>
                                                            <!-- 审核模态框（Modal） -->
                                                            <div class="modal fade" id="myModal" tabindex="-1"
                                                                 aria-hidden="true">
                                                                <div class="modal-dialog">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <button type="button" class="close"
                                                                                    data-dismiss="modal"
                                                                                    aria-hidden="true">&times;</button>
                                                                            <h4 class="modal-title" id="myModalLabel">
                                                                                审核</h4>
                                                                        </div>
                                                                        <form enctype="multipart/form-data"
                                                                              method="post" class="form-horizontal">
                                                                            <div class="modal-body row">
                                                                                <div class="md-col hidden">
                                                                                    <label for="modifyInput1"
                                                                                           class="control-label col-md-2">ID</label>
                                                                                    <div class="col-md-10">
                                                                                        <input type="text"
                                                                                               class="form-control"
                                                                                               id="modifyInput1"/>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="md-col">
                                                                                    <label class="control-label col-md-6">
                                                                                        <input type="radio" value=2 class="radio-inline "
                                                                                               name="modifyInput2">预约成功
                                                                                    </label>
                                                                                    <label class="control-label col-md-6">
                                                                                        <input type="radio" value=3 class="radio-inline"
                                                                                               name="modifyInput2">预约失败
                                                                                    </label>
                                                                                </div>
                                                                                <div class="md-col">
                                                                                    <label for="modifyInput3"
                                                                                           class="control-label col-md-2">反馈信息</label>
                                                                                    <div class="col-md-10">
                                                                                        <input type="text"
                                                                                               class="form-control"
                                                                                               id="modifyInput3"/>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </form>
                                                                        <div class="modal-footer">
                                                                            <button type="button"
                                                                                    class="btn btn-default"
                                                                                    data-dismiss="modal">关闭
                                                                            </button>
                                                                            <button type="button"
                                                                                    class="btn btn-primary"
                                                                                    onclick="modifystate()">提交更改
                                                                            </button>
                                                                        </div>
                                                                    </div><!-- /.modal-content -->
                                                                </div><!-- /.modal -->
                                                            </div>

                                                        </td>
                                                        <td th:class="${state == 1}?'hidden':''"
                                                            th:text="${user.feedback}">反馈信息</td>
                                                        <td th:class="${state == 2}?'':'hidden'">
                                                            <a class="label label-default finish"
                                                               th:id="${user.bookId}">结束</a>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                    </div>


                                    <!--楼下分页-->
                                    <div class="page row clearfix">
                                        <div class="col-md-offset-4 column">
                                            <ul class="pagination pagination-sm">
                                                <!--前一页-->
                                                <li><a th:if="${page.currentPage} gt 1"
                                                       th:href="@{/bookedList?(currentPage=${page.currentPage-1},flag=${flag},num=${num},title=${title},state=${state})}">&laquo;</a>
                                                </li>
                                                <!--首页-->
                                                <li th:class="${page.currentPage le 1} ? 'disabled' : ''">
                                                    <a th:if="${page.currentPage != 1}"
                                                       th:href="@{${keywords != null? '/bookedList' : '/bookedList'}(currentPage=1,keywords=${keywords != null}?${keywords}:'',flag=${flag},num=${num},title=${title},state=${state})}">首页</a>
                                                    <a th:if="${page.currentPage == 1}" href="javascript:void(0);">首页</a>
                                                </li>
                                                <!--动态生成中间的页码格子-->
                                                <li th:each="pageNo : ${#numbers.sequence(page.currentPage - 3 < 0 ? 0 : page.currentPage - 3, (page.currentPage + 3 > page.totalPage - 3 ? page.totalPage - 1: page.currentPage + 3))}"
                                                    th:class="${page.currentPage eq (pageNo+1)}? 'active' : ''">
                                                    <a th:if="${page.currentPage  eq (pageNo+1)}"
                                                       href="javascript:void(0);">
                                                        <text th:text="${pageNo+1}"></text>
                                                    </a>
                                                    <a th:if="${not (page.currentPage eq (pageNo+1))}"
                                                       th:href="@{${keywords != null ? '/bookedList' : '/bookedList'}(currentPage=${pageNo+1},keywords=${keywords != null}?${keywords}:'',flag=${flag},num=${num},title=${title},state=${state})}">
                                                        <text th:text="${pageNo+1}"></text>
                                                    </a>
                                                </li>
                                                <!--尾页-->
                                                <li th:class="${page.currentPage ge page.totalPage} ? 'disabled' : ''">
                                                    <a th:if="${page.currentPage != page.totalPage}"
                                                       th:href="@{${keywords != null? '/bookedList' : '/bookedList'}(currentPage=${page.totalPage},keywords=${keywords != null}?${keywords}:'',flag=${flag},num=${num},title=${title},state=${state})}">末页</a>
                                                    <a th:if="${page.currentPage == page.totalPage}"
                                                       href="javascript:void(0);">末页</a>
                                                </li>
                                                <!--下一页-->
                                                <li><a th:if="${page.currentPage} lt ${page.totalPage}"
                                                       th:href="@{/bookedList?(currentPage=${page.nextPage},flag=${flag},num=${num},title=${title},state=${state})}">&raquo;</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!-- </form>-->
                        </div>

                    </div><!-- panel-body-->
                </div> <!--panel-->
            </div><!-- content-->

            <!--页脚-->
            <div th:replace="fragments/footer :: footer" class="col-lg-12">
                &copy; 2013 The Static Templates
            </div>
        </div>
        <!-- /main content -->

    </div>
    <!-- /page content -->


</div>
<!-- /page container -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModalimg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body row">
                <img id="showimg" class="img-thumbnail">
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
